import React, { useEffect, useState } from 'react'
import styles from './index.module.less'
import Side from '@/component/side'
import { PageRouterConfig } from '@/router/routerConfig'
import PageRouters from '@/router'
import ConfirmDialog from '@/component/confirm-dialog'
import { useLocation, useNavigate } from 'react-router-dom'
import { loginUserInfo, userLogOut } from '@/api/login'
import { SUCCESS_CODE } from '@/config'
import { ExclamationCircleFilled } from '@ant-design/icons'
import { message, Badge } from 'antd'
import { useSelector, useDispatch } from 'react-redux'
import { handleUpdateUserInfo } from '@/store/models/app'
import { RootState } from '@/store'

const whiteList = ['/login']
const Layout = () => {
  const { userInfo } = useSelector((state: RootState) => state.app)
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const location = useLocation()

  useEffect(() => {
    if (window.navigator.onLine === false) {
      navigate('/notNetwork')
    }
    const seToken = window.sessionStorage.getItem('token')
    const loToken = window.localStorage.getItem('token')
    if (!whiteList.includes(location.pathname)) {
      if (!seToken) {
        if (loToken) {
          window.sessionStorage.setItem('token', loToken)
        } else {
          navigate('/login')
        }
      }
    }
  }, [location.pathname])

  useEffect(() => {
    const seToken = window.sessionStorage.getItem('token')
    if (seToken && window.navigator.onLine) {
      getUserInfo()
    }
  }, [])


  // 查看登录帐号及企业详细信息
  const getUserInfo = () => {
    loginUserInfo().then((res: any) => {
      if (res.status_code === SUCCESS_CODE) {
        if (res.data) {
          dispatch(handleUpdateUserInfo(res.data))
        }
      } else {
        message.error(res.message)
      }
    })
  }

  const handleLogOut = () => {
    window.ConfirmDialog({
      title: '退出登录',
      content: (
        <>
          <ExclamationCircleFilled style={{ color: '#FF3F3F', marginRight: 8 }} />
          <span>将取消当前在线状态并回到登录页，是否继续？</span>
        </>
      ),
      onOk: () => {
        return new Promise((resolve: any) => {
          userLogOut({
            type: 1
          }).then((res) => {
            if (res.status_code === SUCCESS_CODE) {
              message.success('退出成功')
              window.localStorage.removeItem('token')
              window.sessionStorage.removeItem('token')
              navigate('/login')
              resolve()
            }
          })
        })
      }
    })
  }

  return (
    <>
      <div className={styles.page_layout_wrapper}>
        <div className={styles.page_side} >
          <div className={styles.logo_content}>
            <img src={userInfo?.enterprise?.logo ? `/storage${userInfo?.enterprise?.logo}` : ''} alt="" />
            <span>线上问诊</span>
          </div>
          <div className={styles.side_menu}>
            <Side routerConfig={PageRouterConfig} />
          </div>
          <div className={styles.user_logout}>
            <div className={styles.userinfo_content}>
              <img src={userInfo?.avatar} alt="" />
              <div>
                <p>{userInfo?.department_name}</p>
                <p>{userInfo?.name} ({userInfo?.phone})</p>
              </div>

            </div>
            <div className={styles.logout_content}>
              <i className='iconfont icon-tuichudenglu1' onClick={handleLogOut}></i>
            </div>
          </div>
        </div>
        <div className={styles.page_main}>
          <PageRouters />
        </div>
      </div>
      <ConfirmDialog />
    </>
  )
}
export default Layout
